<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载按钮</title>
</head>
<style>
	body {
	  height: 100vh;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #212121;
	}
	
	.container {
	  padding: 0;
	  margin: 0;
	  box-sizing: border-box;
	  font-family: Arial, Helvetica, sans-serif;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.label {
	  background-color: transparent;
	  border: 2px solid rgb(91, 91, 240);
	  display: flex;
	  align-items: center;
	  border-radius: 50px;
	  width: 150px;
	  cursor: pointer;
	  transition: all 0.4s ease;
	  padding: 5px;
	  position: relative;
	}
	
	.label::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background-color: #fff;
	  width: 8px;
	  height: 8px;
	  transition: all 0.4s ease;
	  border-radius: 100%;
	  margin: auto;
	  opacity: 0;
	  visibility: hidden;
	}
	
	.label .input {
	  display: none;
	}
	
	.label .title {
	  font-size: 20px;
	  color: #fff;
	  transition: all 0.4s ease;
	  position: absolute;
	  right: 10px;
	  text-align: center;
	  font-weight: bold;
	}
	
	.label .title:last-child {
	  opacity: 0;
	  visibility: hidden;
	}
	
	.label .circle {
	  height: 45px;
	  width: 45px;
	  border-radius: 50%;
	  background-color: rgb(91, 91, 240);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: all 0.4s ease;
	  position: relative;
	  box-shadow: 0 0 0 0 rgb(255, 255, 255);
	  overflow: hidden;
	}
	
	.label .circle .icon {
	  color: #fff;
	  width: 30px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  transition: all 0.4s ease;
	}
	
	.label .circle .square {
	  aspect-ratio: 1;
	  width: 15px;
	  border-radius: 2px;
	  background-color: #fff;
	  opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  transition: all 0.4s ease;
	}
	
	.label .circle::before {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: 0;
	  background-color: #3333a8;
	  width: 100%;
	  height: 0;
	  transition: all 0.4s ease;
	}
	
	.label:has(.input:checked) {
	  width: 45px;
	  animation: installed 0.4s ease 3.5s forwards;
	}
	
	.label:has(.input:checked)::before {
	  animation: rotate 3s ease-in-out 0.4s forwards;
	}
	
	.label .input:checked+.circle {
	  animation: pulse 1s forwards, circleDelete 0.2s ease 3.5s forwards;
	  rotate: 180deg;
	}
	
	.label .input:checked+.circle::before {
	  animation: installing 3s ease-in-out forwards;
	}
	
	.label .input:checked+.circle .icon {
	  opacity: 0;
	  visibility: hidden;
	}
	
	.label .input:checked~.circle .square {
	  opacity: 1;
	  visibility: visible;
	}
	
	.label .input:checked~.title {
	  opacity: 0;
	  visibility: hidden;
	}
	
	.label .input:checked~.title:last-child {
	  animation: showInstalledMessage 0.4s ease 3.5s forwards;
	}
	
	@keyframes pulse {
	  0% {
	    scale: 0.95;
	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	  }
	
	  70% {
	    scale: 1;
	    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
	  }
	
	  100% {
	    scale: 0.95;
	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	  }
	}
	
	@keyframes installing {
	  from {
	    height: 0;
	  }
	
	  to {
	    height: 100%;
	  }
	}
	
	@keyframes rotate {
	  0% {
	    transform: rotate(-90deg) translate(27px) rotate(0);
	    opacity: 1;
	    visibility: visible;
	  }
	
	  99% {
	    transform: rotate(270deg) translate(27px) rotate(270deg);
	    opacity: 1;
	    visibility: visible;
	  }
	
	  100% {
	    opacity: 0;
	    visibility: hidden;
	  }
	}
	
	@keyframes installed {
	  100% {
	    width: 150px;
	    border-color: rgb(35, 174, 35);
	  }
	}
	
	@keyframes circleDelete {
	  100% {
	    opacity: 0;
	    visibility: hidden;
	  }
	}
	
	@keyframes showInstalledMessage {
	  100% {
	    opacity: 1;
	    visibility: visible;
	    right: 56px;
	  }
	}
</style>
<body>
    <div class="container">
        <label class="label">
            <input class="input" type="checkbox" />
            <span class="circle"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true" class="icon">
                    <path d="M12 19V5m0 14-4-4m4 4 4-4" stroke-width="1.5" stroke-linejoin="round"
                        stroke-linecap="round" stroke="currentColor"></path>
                </svg>
                <div class="square"></div>
            </span>
            <p class="title">Download</p>
            <p class="title">Open</p>
        </label>
    </div>

</body>

</html>